<template>
  <div id="header">
     <el-row style="height:100%">
      <el-col :span="16">
        <div id="bread">
          <breadcrumbVue></breadcrumbVue>
        </div>
      </el-col>
      <el-col :span="1" class="func">
        <el-tooltip effect="light" content="全屏显示" placement="bottom">
          <el-icon :size="30" color="#545c64"><Rank /></el-icon>
        </el-tooltip>
      </el-col>
      <el-col :span="1" class="func">
        <el-tooltip effect="light" content="邮件" placement="bottom">
          <el-icon :size="30" color="#545c64"><Message /></el-icon>
        </el-tooltip>
      </el-col>
      <el-col :span="1" class="func">
        <el-tooltip effect="light" content="设置" placement="bottom">
          <el-icon :size="30" color="#545c64"><Setting /></el-icon>
        </el-tooltip>
      </el-col>
      <el-col :span="3">
        <div id="user">
          <Dropdown></Dropdown>
        </div>
      </el-col>
     </el-row>
  </div>
</template>

<script>
import Dropdown from './Dropdown.vue'
import breadcrumbVue from './breadcrumb.vue'
import {Message} from '@element-plus/icons'
import {Setting} from '@element-plus/icons'
import {Rank} from '@element-plus/icons'
export default {
  name: "Header",
  components: {
      Dropdown,
      breadcrumbVue,
      Message,
      Setting,
      Rank
  },
}
</script>

<style scoped>
#header{
    height: 100%;
}

#user{
  height:100%;
  width:100%;
  display:flex;
  justify-content: center;
  flex-direction: column;
}

#bread{
  height:100%;
  width:100%;
}

.func{
  height:100%;
  width:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

</style>